.input-inner-base() {
  border-width: 1px;
  border-style: solid;
  border-radius: @input-border-radius;
  border-color: @input-border-color-default;
  padding: 0 @input-padding-horizontal-default;
  background-color: @input-bg-color-default;
  outline: none;
  color: @input-text-color-default;
  font-size: @input-font-size;
  width: 100%;
  box-sizing: border-box;
  transition: @input-inner-transition;

  &::placeholder {
    color: @input-placeholder-color;
  }

  &:hover {
    border-color: @input-border-color-default-hover;
  }

  &:focus {
    z-index: 1;
    border-color: @input-border-color-default-focus;
    box-shadow: @input-box-shadow-focus;
  }
}

.input-disabled {

  &.@{prefix}-input.@{prefix}-is-disabled {

    & > .@{prefix}-input__inner {
      color: @input-text-color-disabled;
      background-color: @input-bg-color-disabled;
      cursor: not-allowed;

      &:hover {
        border-color: @input-border-color-default;
      }
    }

    & > .@{prefix}-input__prefix,
    & > .@{prefix}-input__suffix {

      .@{prefix}-icon {
        color: @input-text-color-disabled;
      }
    }
  }
}

.input-status(@status) {

  &.@{prefix}-is-@{status} {

    & > .@{prefix}-input__inner {
      border-color: @@borderColor;

      &:focus {
        box-shadow: 0 0 0 2px @@boxShadowColor;
        @boxShadowColor: "input-box-shadow-color-@{status}-focus";
      }
      @borderColor: "input-border-color-@{status}";
    }

    & > .@{prefix}-input__extra {
      color: @@fontColor;
      @fontColor: "input-extra-color-@{status}";
    }
  }
}

.input-fix-position(@position) {

  &.@{prefix}-input--@{position} {

    & > .@{prefix}-input__inner {
      & when (@position = prefix) {
        padding-left: @input-fix-padding;
      }
      & when (@position = suffix) {
        padding-right: @input-fix-padding;
      }
    }

    & > .@{prefix}-input__@{position} {
      position: absolute;
      top: 0;
      z-index: 2;
      height: 100%;
      text-align: center;
      display: flex;
      align-items: center;
      font-size: @font-size-l;
      & when (@position = prefix) {
        left: @input-fix-position;
      }
      & when (@position = suffix) {
        right: @input-fix-position;
      }
    }
  }
}

.input-size(@size) {
  & when(@size = l) {

    &.@{prefix}-size-l {

      & > .@{prefix}-input__inner {
        height: @input-height-l;
        line-height: @input-height-l;
      }
    }
  }
  & when not (@size = l) {

    &.@{prefix}-size-@{size} {
      width: @@width-size;
      @width-size: "input-width-@{size}";
    }
  }
}

.addon-item(@position) {

  .@{prefix}-addon__@{position} {
    background-color: @input-append-color;
    color: @input-text-color-default;
    vertical-align: middle;
    display: table-cell;
    position: relative;
    border: 1px solid @input-border-color-default;
    padding: @input-addon-item-padding;
    width: 1px;
    white-space: nowrap;
    & when (@position = append) {
      border-left: 0;
      border-radius: 0 @input-border-radius @input-border-radius 0;
    }
    & when (@position = prepend) {
      border-right: 0;
      border-radius: @input-border-radius 0 0 @input-border-radius;
    }
  }
}
